<template>
	<view>
		<view class="h_comment" v-for="(item, index) in  commentList " :key="item.id">



			<!-- 一级评论 => 列表 => -->
			<view class="h_left">
				<image size="64rpx" :src="item.url"></image>
			</view>

			<view class="h_right">
				<!-- 用户信息 -->
				<view class="h_info">
					<view class="name" :style="{ color: themeColor }">{{ item.name }}</view>
					<view class="like" :style="{ color: item.isLike ? themeColor : '#9a9a9a' }">
						<view class="num" :style="{ color: item.isLike ? themeColor : '#9a9a9a' }">{{ item.likeNum }}
						</view>
						<u-icon v-if="!item.isLike" name="thumb-up" :size="30" color="#9a9a9a"
							@click="getLike(index,undefined,item.id,item.isLike)"></u-icon>
						<u-icon v-if="item.isLike" name="thumb-up-fill" :color="themeColor" :size="30"
							@click="getLike(index,undefined,item.id,item.isLike)"></u-icon>
					</view>
				</view>

				<!-- 一级评论 => 文本 -->
				<view class="h_content">{{ item.contentText }}</view>

				<!-- 一级评论 => 日期、回复 -->
				<view class="h_date">
					{{ item.date }}
					<view class="h_revert" :style="{ color: themeColor }" @tap="showRevertPop(index, item, null, null)">
						回复
					</view>
					<view class="h_remove" v-if="item.isMyComment" @tap="removeRevertModal(index, item, null, null)">
						删除
					</view>
				</view>

				<!-- 二级评论 -->
				<view class="h_revert_list">

					<!-- 二级评论 => 列表 -->
					<view class="item_s" v-for="( item_s, j ) in  item.replyList " :key="item_s.id">
						<view class="user-info">
							<image size="40rpx" style="width: 30px;height: 30px;border-radius: 20px;" :src="item_s.url">
							</image>
							<view class="username">
								<view class="left-name">
									{{ item_s.name }}
								</view>

								<u-icon v-if="item_s.to_user_id" name="play-right-fill" color="#868686"
									size="10"></u-icon>
								<view class="right-name">
									{{ item_s.to_user_name }}
								</view>
							</view>
							<view class="like" :style="{ color: item_s.isLike ? themeColor : '#9a9a9a' }">
								<view class="num" :style="{ color: item_s.isLike ? themeColor : '#9a9a9a' }">{{
                                    item_s.likeNum }}</view>
								<u-icon v-if="!item_s.isLike" name="thumb-up" :size="30" color="#9a9a9a"
									@click="getLike(index, j,item_s.id)"></u-icon>
								<u-icon v-if="item_s.isLike" name="thumb-up-fill" :color="themeColor" :size="30"
									@click="getLike(index, j,item_s.id)"></u-icon>
							</view>
						</view>
						<view class="text">{{ item_s.contentStr }}</view>
						<view class="date">
							{{ item_s.date }}
							<view class="revert" :style="{ color: themeColor }"
								@tap="showRevertPop(index, item, j, item_s)">回复</view>
							<view class="h_remove" v-if="item_s.user_isMyComment"
								@tap="removeRevertModal(index, item, j, item_s)">
								删除
							</view>
						</view>
					</view>


					<!-- loading -->
					<!-- 	<u-loading-icon class="p-t-20" :show="item.isLoading" :color="themeColor" textColor="#ccc"
						text="加载中" :duration="1500">
					</u-loading-icon> -->

					<!-- 展开更多二级评论 -->
					<view class="reply-more" @tap="showAllReply(index, item)"
						v-if="item.allReply && Number(item.allReply) - item.replyList.length">
						<view class="left-line" />
						展开{{ item.allReply - item.replyList.length }}条回复
						<u-icon class="more" name="arrow-down" :size="20"></u-icon>
					</view>

					<!-- 收起二级评论 -->
					<view class="reply-more flex-row-center" @tap="closetoAllReply(index)"
						v-if="item.allReply && Number(item.allReply) === item.replyList.length">
						<view class="left-line" />
						收起回复
						<u-icon class="more" name="arrow-up" :size="20"></u-icon>
					</view>


				</view>
			</view>
		</view>


		<!-- 评论弹框 -->
		<uni-popup id="pop" ref="revertRef" type="bottom" class="comment-pop" @change="onChangePop">
			<view class="comment-pop-content">
				<u-input style="flex:1;" :placeholder="placeholder" border="surround" shape="circle" v-model="inputVal"
					:focus="comtIptFocusStatus" @input="onChangeIput">
				</u-input>
				<view class="send" :style="{ background: themeColor }" @click="sendComment">发送</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import uniPopup from '@/uview-ui/components/u-popup/u-popup.vue'
	export default {

		components: {
			uniPopup
		},


		/**
		 * 评论组件
		 * @props list 评论列表
		 * @props modelValue 评论 输入框的value ==> 可使用 v-model 语法糖
		 * @props themeColor 主题色
		 * @props keyNames 指定keyName 详见文档
		 * @event getLike 点赞事件
		 * @event sendComment 发送评论事件
		 * @event getMore 获取更多评论事件
		 * @event remove 删除评论事件
		 * 
		 * @export close 发送评论成功可调用 【close方法】 关闭评论弹框
		 *
		 * @example <h-comment-box :list="评论列表" v-model="输入框的值" @getLike="点赞回调" @sendComment="发送评论回调" ref="hCommentRef"/>
		 */

		/**
		 * 定义props
		 * @param list 评论列表
		 * @param modelValue 评论 输入框的value
		 * @param themeColor 主题色
		 * @param keyNames 指定keyName
		 */
		props: {
			list: {
				type: Array,
				default: () => []
			},
			modelValue: {
				type: String,
				default: ''
			},
			// themeColor: {
			// 	type: String,
			// 	default: '#1DBFB6'
			// },
			keyNames: {
				type: Object,
				default: () => {
					return {
						// 一级评论相关
						id: 'id', // 评论id
						user_id: 'userId', // 用户id
						user_name: 'username', // 用户名
						user_avatar: 'avatar', // 用户头像
						user_content: 'commentContent', // 用户评论内容
						user_date: 'createTime', // 用户评论时间
						user_is_like: 'user_is_like', // 用户是否点赞
						user_like_num: 'likeCount', // 用户点赞数
						isLoading: 'isLoading', // 是否显示加载中
						allReply: 'allReply', // 评论总数
						isMyComment: 'isMyComment', // 是否是自己的评论
						// 二级评论相关
						user_reply_list: 'childComments', // 回复列表
						user_reply_id: 'id', // 回复人id
						user_reply_name: 'username', // 回复人名字
						user_reply_avatar: 'avatar', // 回复人头像
						user_reply_content: 'commentContent', // 回复 内容
						user_reply_date: 'createTime', // 回复 时间
						user_reply_is_like: 'likeCount', // 回复人是否点赞
						user_reply_like_num: 'likeCount', // 回复人点赞数
						pid: 'parentCommentId',
						user_isMyComment: 'user_isMyComment', // 是否是自己的评论
						to_user_name: 'parentUsername', // 被回复人名字
						to_user_id: 'parentUserId', // 被回复人id
					}
				}
			}

		},

		data() {
			return {
				themeColor: '#1DBFB6', // 定义主题色
				placeholder: '请输入内容', // 输入框的placeholde
				inputVal: '',
				revertRef: null, // uni_popup 弹框实例
				comtIptFocusStatus: false, // 评论输入框聚焦状态
				isComtIndex: 0,
				isComtRow: {}, // 回复：点击的 一级评论信息
				isComtIndex_s: 0, // 回复：点击的 二级评论索引
				isComtRow_s: {}, // 回复：点击的 二级评论信息
				commentList: [],


			};
		},


		methods: {
			
			/**
			 * 弹框change事件
			 */

			onChangePop(e) {
				this.comtIptFocusStatus = e.show;
			},
			/**
			 * @argument index 一级评论索引
			 * @argument row 一级评论信息
			 * @argument index_s 二级评论索引
			 * @argument row_s 二级评论信息
			 * @callback ()=>{} 发送评论接口成功之后 调用sendComment的第二个形参 该形参为方法，更新组件内的评论列表
			 */

			/**
			 * 发送评论
			 */
			sendComment() {
				this.$emit('sendComment', {
					index: this.isComtIndex,
					row: this.isComtRow,
					index_s: this.isComtIndex_s,
					row_s: this.isComtRow_s,
				}, (data) => {
					
					
					if (this.isComtIndex_s !== null) {
						this.commentList[this.isComtIndex].replyList.unshift({
							...data,
							isMyComment: true
						})
					} else {
						this.commentList.unshift({
							...data,
							isMyComment: true
						})
					}
					
					
					this.close()
				})
			},







			/**
			 * 回复评论弹框
			 * @param index  一级评论索引
			 * @param row   一级评论信息
			 * @param j  二级评论索引
			 * @param row_s 二级评论信息
			 */
			showRevertPop(index, row, j, row_s) {
				
				console.log(row_s);
				this.isComtIndex = index;
				this.isComtRow = {
					id: row.id,
					userId:row.userId,
					name: row.name,
					url: row.url,
					contentText: row.contentText,
					date: row.date,
					isLike: row.isLike,
					likeNum: row.likeNum,
					allReply: row.allReply,
					isMyComment: row.isMyComment,
				};
				if (j !== null) {
					this.isComtIndex_s = j;
				}
				if (row_s !== null) {
					this.isComtRow_s = {
						id: row_s.id,
						userId:row_s.userId,
						pid: row_s.pid,
						name: row_s.name,
						url: row_s.url,
						contentStr: row_s.contentStr,
						date: row_s.date,
						isLike: row_s.isLike,
						likeNum: row_s.likeNum,
						user_isMyComment: row_s.user_isMyComment,
					};
				}

				this.placeholder = `回复 @${j !== null ? row_s.name : row.name}`;
				this.openPop();
			},


			/**
			 * 删除评论
			 * @param index  一级评论索引
			 * @param row   一级评论信息
			 * @param j  二级评论索引
			 * @param row_s 二级评论信息
			 */
			removeRevertModal(index, row, j, row_s) {
				const message = j === null ? '确定删除该评论吗？' : '确定删除该回复吗？';
				uni.showModal({
					title: '提示',
					content: message,
					success: (res) => {
						if (res.confirm) {
							this.$emit('remove', {
								index,
								row,
								j,
								row_s
							}, () => {
								if (j !== null) {
									this.commentList[index].replyList.splice(j, 1);
									this.commentList[index].allReply--;
								} else {
									this.commentList.splice(index, 1);
								}
							});
						}
					}
				});
			},

			/**
			 * 打开评论弹框
			 */
			openPop() {
				this.$refs.revertRef.open()
			},


			/**
			 * 关闭评论弹框
			 * @param msg 提示信息 不传则不提示
			 */
			close(msg) {
				this.$refs.revertRef.close()
				this.inputVal = ''
				if (msg) uni.showToast({
					title: msg,
					icon: 'none'
				})
			},


			/**
			 * 收起回复
			 */
			closetoAllReply(index) {
				console.log(this.commentList[index].replyList,"front");
				this.commentList[index].replyList = []
				console.log(this.commentList[index].replyList,"after");
				
				
			},


			/**
			 * 展开更多评论
			 * @param index 一级评论索引
			 */
			showAllReply(index, row) {
				
				//如果commentList不是空，则需要进行传值
				if(this.commentList[index].replyList.length == 0){
					console.log("空置");
				}
				
				let commentListLength = this.commentList[index].replyList.length
				
				
				console.log(this.commentList[index].replyList);
				
				this.commentList[index].isLoading = true; // 显示加载中
				this.$emit('getMore', {
					index,
					row,
					commentListLength
				}, (data) => {
					let newData = null;

					if (Array.isArray(data) && data.length) {
						newData = data.map((item) => {
							return {
								id: item[this.keyNames.user_reply_id],
								pid: item[this.keyNames.pid],
								name: item[this.keyNames.user_reply_name],
								url: item[this.keyNames.user_reply_avatar],
								contentStr: item[this.keyNames.user_reply_content],
								date: item[this.keyNames.user_reply_date],
								isLike: item[this.keyNames.user_reply_is_like],
								likeNum: item[this.keyNames.user_reply_like_num],
								to_user_id: item[this.keyNames.to_user_id],
								to_user_name: item[this.keyNames.to_user_name],
								user_isMyComment: item[this.keyNames.user_isMyComment],
							};
						});

						this.commentList[index].replyList.push(...newData);

					} else {
						newData = {
							id: item[this.keyNames.user_reply_id],
							pid: item[this.keyNames.pid],
							name: item[this.keyNames.user_reply_name],
							url: item[this.keyNames.user_reply_avatar],
							contentStr: item[this.keyNames.user_reply_content],
							date: item[this.keyNames.user_reply_date],
							isLike: item[this.keyNames.user_reply_is_like],
							likeNum: item[this.keyNames.user_reply_like_num],
							to_user_id: item[this.keyNames.to_user_id],
							to_user_name: item[this.keyNames.to_user_name],
							user_isMyComment: item[this.keyNames.user_isMyComment],
						};

						this.commentList[index].replyList.push(newData);

					}

					this.commentList[index].isLoading = false; // 关闭加载中

				});
			},


			/**
			 * 点赞
			 * @param index 一级评论索引
			 * @param j 二级评论索引
			 */
			getLike(index, j, id, islike) {

				/**
				 * index 一级评论索引
				 * j 二级评论索引
				 * ()=>{} 点在接口成功之后 调用getLike的第二个形参 该形参为方法，更新组件内的点赞样式
				 */
				this.$emit('getLike', {
					index,
					j,
					id
				}, () => {


					if (j !== undefined) {
						this.commentList[index].replyList[j].isLike = !this.commentList[index].replyList[j].isLike;
						if (this.commentList[index].replyList[j].isLike == true) {
							this.commentList[index].replyList[j].likeNum++;
						} else {
							this.commentList[index].replyList[j].likeNum--;
						}

					} else {

						this.commentList[index].isLike = !this.commentList[index].isLike;

						if (this.commentList[index].isLike == true) {
							this.commentList[index].likeNum++;
						} else {
							this.commentList[index].likeNum--;
						}

					}
				});
			},


			/**
			 * 输入框内容改变 => 更新v-model
			 */
			onChangeIput(e) {
				
				this.$emit('updateModelValue', e)
			}



		},


		created() {

			this.commentList = this.list.map((item) => {
				
				return {
					id: item[this.keyNames.id],
					userId:item[this.keyNames.user_id],
					name: item[this.keyNames.user_name],
					url: item[this.keyNames.user_avatar],
					contentText: item[this.keyNames.user_content],
					date: item[this.keyNames.user_date],
					isLike: item[this.keyNames.user_is_like],
					likeNum: item[this.keyNames.user_like_num],
					isLoading: item[this.keyNames.isLoading],
					allReply: item[this.keyNames.allReply],
					isMyComment: item[this.keyNames.isMyComment],
					replyList: item[this.keyNames.user_reply_list].records.map((item_s) => {
						return {
							id: item_s[this.keyNames.user_reply_id],
							userId:item_s[this.keyNames.user_id],
							pid: item_s[this.keyNames.pid],
							name: item_s[this.keyNames.user_reply_name],
							url: item_s[this.keyNames.user_reply_avatar],
							contentStr: item_s[this.keyNames.user_reply_content],
							date: item_s[this.keyNames.user_reply_date],
							isLike: item_s[this.keyNames.user_reply_is_like],
							likeNum: item_s[this.keyNames.user_reply_like_num],
							to_user_name: item_s[this.keyNames.to_user_name],
							to_user_id: item_s[this.keyNames.to_user_id],
							user_isMyComment: item_s[this.keyNames.user_isMyComment],
						}
					})
				}
			})

			uni.getStorage({
				key: "like",
				success: (res) => {
					const like_commentId = res.data

					this.commentList.forEach((comment) => {
						if (like_commentId.includes(comment.id)) {

							// 在这里对评论进行高亮处理
							comment.isLike = true;

						}
					})
				}
			})



		},

		/**
		 * 定义事件
		 */
		// const emit = defineEmits(['getLike', 'sendComment', 'getMore', 'remove', 'update:modelValue'])
		// defineExpose({
		// 	close
		// })


	}
</script>

<style lang="scss" scoped>
	.h_comment {
		display: flex;
		padding: 30rpx 30rpx 0 30rpx;
		background-color: #fff;

		.h_left {
			image {
				width: 64rpx;
				height: 64rpx;
				border-radius: 50%;
				background-color: #f2f2f2;
			}
		}

		.h_right {
			flex: 1;
			padding-left: 20rpx;
			padding-top: 6rpx;
			font-size: 30rpx;


			.h_info {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 10rpx;



				.like {
					display: flex;
					align-items: center;
					font-size: 26rpx;

					.num {
						margin-right: 4rpx;
					}
				}


			}

			.h_content {
				margin-bottom: 10rpx;
			}


			.h_date {
				display: flex;
				font-size: 24rpx;
				color: #9a9a9a;


				.h_revert {
					margin-left: 10rpx;
				}

				.h_remove {
					color: #868686;
					margin-left: 20rpx;

				}
			}



			.h_revert_list {
				background-color: rgb(251, 251, 251);
				border-radius: 12rpx;
				margin-top: 20rpx;
				padding: 0 20rpx;

				.item_s {
					padding-top: 20rpx;


					.user-info {
						display: flex;
						align-items: center;


						.username {
							flex: 1;
							display: flex;
							align-items: center;
							font-size: 24rpx;
							color: #999999;
							margin-left: 10rpx;

							.left-name {
								margin-right: 10rpx;
							}

							.right-name {
								margin-left: 10rpx;
							}

						}


						.like {
							display: flex;
							align-items: center;
							color: #9a9a9a;
							font-size: 26rpx;

							.num {
								margin-right: 4rpx;
								color: #9a9a9a;
							}
						}


					}

					.text {
						padding: 8rpx 0;
					}

					.date {
						display: flex;
						font-size: 24rpx;
						color: #9a9a9a;


						.revert {
							margin-left: 10rpx;
						}

						.h_remove {
							color: #868686;
							margin-left: 20rpx;
						}
					}
				}


				.reply-more {
					width: 100%;
					padding-top: 20rpx;
					display: flex;
					color: #868686;
					align-items: center;
					font-size: 24rpx;
					padding-bottom: 20rpx;


					.left-line {
						width: 50rpx;
						height: 2rpx;
						background-color: #eee;
						margin-right: 10rpx;
					}


					.more {
						margin-left: 6rpx;
					}
				}



			}
		}
	}




	::v-deep .vue-ref {
		padding-bottom: 0 !important;
	}




	.comment-pop-content {
		padding: 0 30px;
		height: 100rpx;
		width: 750rpx;
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;

		.send {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 120rpx;
			height: 40rpx;
			border-radius: 60rpx;
			font-size: 28rpx;
			font-weight: 500;
			color: #ffffff;
			margin-left: 18rpx;
		}
	}

	.p-t-20 {
		padding-top: 20rpx;
	}


	.flex-row-center {
		justify-content: center;
	}
</style>